{# PANES #}
<div id="adventures_tab" data-cy="adventures_tab" class="w-full overflow-auto">
    {# Stub of an adventure that's shown while the page loads. Once the javascript loads, it will be hidden #}
    <div id="adventure_loading" class="">
        <div class="w-full overflow-auto bg-white mb-5 shadow-md">
            <div class="">
                <div class="lg:flex lg:flex-row">
                    <div class="w-full lg:w-1/2 p-2 ltr:mr-2 rtl:ml-2 h-64">
                        <div class="image relative overflow-hidden bg-[#e9ebee]
                        after:content-[''] after:block after:bg-[#dddfe2]
                        after:absolute after:inset-0 after:w-full after:h-full
                        after:animate-[loading-placeholder_1.5s_ease-in-out_infinite] h-20">
                        </div>
                        <div class="image mt-10 relative overflow-hidden bg-[#e9ebee]
                        after:content-[''] after:block after:bg-[#dddfe2]
                        after:absolute after:inset-0 after:w-full after:h-full
                        after:animate-[loading-placeholder_1.5s_ease-in-out_infinite] h-5">
                        </div>
                        <div class="image mt-5 relative overflow-hidden bg-[#e9ebee]
                        after:content-[''] after:block after:bg-[#dddfe2]
                        after:absolute after:inset-0 after:w-full after:h-full
                        after:animate-[loading-placeholder_1.5s_ease-in-out_infinite] h-5">
                        </div>
                    </div>
                    <div class="border"></div>
                    <div class="lg:w-1/2 w-full p-2 ltr:ml-2 rtl:mr-2 h-64">
                        <div class="image relative overflow-hidden bg-[#e9ebee]
                        after:content-[''] after:block after:bg-[#dddfe2]
                        after:absolute after:inset-0 after:w-full after:h-full
                        after:animate-[loading-placeholder_1.5s_ease-in-out_infinite] h-2/3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% for adventure in adventures %}
    {% set adv_name = adventure.short_name %}
    {% set show_solution = (is_teacher or is_second_teacher) and (adventure.solutions and adventure.solutions|length >
    0) and (not session.preview_class) %}
    <div id="adv_{{adv_name}}" data-tabtarget="{{adv_name}}" class="hidden">

        {% if show_solution %}
        <div class="h-full w-full list-none flex flex-row items-center gap-x-2 xl:gap-x-6 mb-4 mx-2">
            <div class="cust-adv-tab cust-adv-tab-text cust-adv-tab_{{adv_name}} active flex-initial truncate flex items-center justify-center"
                data-cy="adventure_content" _="on click remove .active from .cust-adv-tab_{{adv_name}}
                                add .active to me
                                add .hidden to .tab_content_{{adv_name}}
                                remove .hidden from .adventure_content_{{adv_name}}">
                <div class="cust-adv-text">{{_('adventure')}}</div>
            </div>
            <div class="cust-adv-tab cust-adv-tab-text cust-adv-tab_{{adv_name}} flex-initial truncate flex items-center justify-center"
                data-cy="adventure_solution" _="on click remove .active from .cust-adv-tab_{{adv_name}}
                                add .active to me
                                add .hidden to .tab_content_{{adv_name}}
                                remove .hidden from .adventure_solution_{{adv_name}}">
                <div class="cust-adv-text">{{_('solution')}}</div>
            </div>
        </div>
        {% endif %}
        <div class="w-full overflow-auto bg-white mb-5 shadow-md">
            <div class="tab_content_{{adv_name}} adventure_content_{{adv_name}}
                          turn-pre-into-ace show-copy-button text-adventure-copy">
                <div class="lg:flex lg:flex-row {% if adventure.is_teacher_adventure %}teacher-adv{% endif %}">
                    <div
                        class="w-full {% if adventure.example_code or adventure.is_teacher_adventure %}lg:w-1/2 {% endif %} p-2 ltr:mr-2 rtl:ml-2">
                        {% if adventure.is_teacher_adventure %}{{ adventure.text|safe }}{% else %}{{
                        adventure.text|commonmark }}{% endif %}
                    </div>
                    {% if adventure.example_code %}
                    <div class="border"></div>
                    <div class="lg:w-1/2 w-full p-2 ltr:ml-2 rtl:mr-2">
                        {% if adventure.is_teacher_adventure %}{{ adventure.example_code|safe }}{% else %}{{
                        adventure.example_code|commonmark }}{% endif %}
                    </div>
                    {% endif %}
                </div>
                <div class="{% if not adventure.extra_stories %}hidden{% endif %}" id="extra_{{adv_name}}">
                    {% for story in adventure.extra_stories %}
                    <div class="lg:flex lg:flex-row border-t-2">
                        <div class="lg:w-1/2 w-full p-2 ltr:mr-2 rtl:ml-2">
                            <div class="max-w-prose">
                                {{ story.text|commonmark }}
                            </div>
                        </div>
                        {% if story.example_code %}
                        <div class="border"></div>
                        <div class="lg:w-1/2 w-full p-2 ltr:ml-2 rtl:mr-2">
                            {{ story.example_code|commonmark }}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>

            {% if show_solution %}
            <div class="tab_content_{{adv_name}} adventure_solution_{{adv_name}} hidden
                            turn-pre-into-ace show-copy-button text-adventure-copy">
                <div class="{% if adventure.is_teacher_adventure %}teacher-adv{% endif %}">
                    {% for solution in adventure.solutions %}
                    <div class="lg:flex lg:flex-row border-t-2">
                        <div class="lg:w-1/2 w-full p-2 ltr:mr-2 rtl:ml-2">
                            {% if solution.text %}
                            <div class="max-w-prose">
                                {{ solution.text|commonmark }}
                            </div>
                            {% endif %}
                        </div>

                        <div class="border"></div>
                        <div class="lg:w-1/2 w-full p-2 ltr:ml-2 rtl:mr-2">
                            {{ solution.code|commonmark }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>